<?php

// 载入配置文件
require_once '../../../config.php';

//先给用户一个箱子
session_start();

    function login(){
    if(empty($_POST['email'])){
        $GLOBALS['message'] = '请检查用户名';
        return;
    }
    if(empty($_POST['password'])){
        $GLOBALS['message'] = '密码错误';
        return;
    }
    $email = $_POST['email'];
    $password = $_POST['password'];


    // 数据库的操作
    $conn = mysqli_connect(XIU_DB_HOST,XIU_DB_USER,XIU_DB_PASS,XIU_DB_NAME);
    if(!$conn){
        exit('<h1>数据库连接失败</h1>');
    };

    $query = mysqli_query($conn,"SELECT * FROM users where email = '{$email}' limit 1;");

    if( !$query ){
        $GLOBALS['message'] = '登录失败，请重试';
        return;
    };
    $user = mysqli_fetch_assoc($query);
   
    if(!$user){
        $GLOBALS['message'] = '邮箱与密码不匹配';
        return;
    }
    if($user['password'] !== $password){
        $GLOBALS['message'] = '邮箱与密码不匹配';
        return;
    }



        $_SESSION['current_login_user'] = $user;


    header('Location: /admin/index.php');
    
}
if($_SERVER['REQUEST_METHOD'] ==='POST'){
    login();
};


?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign in &laquo; Admin</title>
    <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/assets/css/login_css.css">
    <link rel="stylesheet" href="/static/assets/vendors/animate/animate.css">
    <script src="/static/assets/vendors/jquery/jquery.min.js"></script>

</head>
<style>
    .login_in {
        display: none;
    }

    #com {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 438px;
        height: 113px;
        text-align: center;
        font-family: cursive;
        z-index: 99999;
       
    }
    /* #com:hover {
        
        
        
    } */

       /* 声明动画  关键帧  @keyframes 动画名称 { } */
        @keyframes move{
            0% {
                transition: all 0.5s ease;
                transform: translate(50%,50px) scale(0.8); /* 顺序有关系，先移动，后缩放 */
            }
            40% {
                transition: all 0.5s ease;
                transform: translate(-633px,-103px) scale(0.8);
            }
            60% {
                transform: translate(-733px,-203px) scale(0.8);
            }
            100% {
                transform: translate(-823px,-285px) scale(0.7);
            }



        }
</style>

<body>
    <div id="login">
        <div id="com">
            <h1 id="time" class="animated heartBeat ">

            </h1>
        </div>
        <form class="login_in" action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
            <img class="avatar" src="/static/assets/img/back.jpg">
            <?php if (isset($message)) : ?>
            <div class="alert alert-danger warn">
                <?php echo $message; ?>
            </div>
            <?php endif; ?>
            <label for="email" class="sr-only">邮箱</label>
            <input id="email" name="email" type="email" class="form-control" placeholder="邮箱" autofocus
                value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>">

            <label for="password" class="sr-only">密码</label>
            <input id="password" name="password" type="password" class="form-control" placeholder="密码">
            <button class="btn btn-primary btn-block">登 录</button>
            <span class="regist_account">你想要一个账户<a href="register.php">注册</a></span>
        </form>
    </div>

    <script>
        $(function ($) {

            //时机： 输入邮箱过后，页面展示对应的头像
            // 实现：
            // 时机：邮箱失去焦点
            // 事情：获取头像地址，展示到 img 元素上

            var emailFormat = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/

            $('#email').on('blur', function () {
                var value = $(this).val()
                //    忽略掉空文本，或者不是一个邮箱
                if (!value || !emailFormat.test(value)) return;

                //    输入正确，获取地址，展示到 img 元素上，js 发送 ajax 获取

                $.get('/admin/api/avatar.php', {
                    email: value
                }, function (res) {
                    if (!res) return
                    // 展示元素
                    console.log(res)
                    $('.avatar').fadeOut(function () {
                        $(this).on('load', function () {
                            $(this).fadeIn();
                        }).attr('src', res);

                    })

                })

            })
        })
        // var kk = document.getElementById("#login").style.background
    </script>
    <script>
        $(function ($) {

            setTimeout(() => {

                $('#time').css("animation","move 10s ease")

            }, 200);



            function getDate() {
                var a = new Array("日", "一", "二", "三", "四", "五", "六");
                var dt = new Date();
                //获取年，月，日，时间
                var year = dt.getFullYear();
                var month = dt.getMonth();
                var day = dt.getDate();
                var hour = dt.getHours();
                var minute = dt.getMinutes();
                var second = dt.getSeconds();
                // var day= dt.getDay();
                var week = new Date().getDay();

                month = month < 10 ? "0" + month : month;
                day = day < 10 ? "0" + day : day;
                hour = hour < 10 ? "0" + hour : hour;
                minute = minute < 10 ? "0" + minute : minute;
                second = second < 10 ? "0" + second : second;
                // month=month<10?"0"+month:month;

                var time = year + "年" + month + "月" + day + "日" + " 星期" + a[week] + "<br/>" + hour + ":" +
                    minute + ":" + second;
                document.getElementById('time').innerHTML = time
            }
            setInterval(getDate, 1000)

        })
    </script>
</body>

</html>